<template>
  <el-dialog :title="title" :visible.sync="visible">
    <el-form :model="roleInfo" label-position="right" label-width="80px">
      <el-form-item label="角色名">
        <el-input v-model="roleInfo.name" placehoder="请输入角色名"></el-input>
      </el-form-item>
      <el-form-item label="授权码">
        <el-input v-model="roleInfo.tips" placehoder="请输入授权码"></el-input>
      </el-form-item>
      <el-form-item label="部门选择">
        <el-cascader
          :options="deptList"
          :show-all-levels="false"
          :props="{label:'fullname',value:'id',emitPath:false,checkStrictly:true}"
          v-model="roleInfo.deptid"></el-cascader>
      </el-form-item>
      <el-form-item label="上级角色">
        <el-select filterable v-model="roleInfo.pid">
          <el-option v-for="item in roleList" :key="item.id" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
    </el-form>
    <div slot="footer">
      <el-button type="warning" @click="visible=false">取消</el-button>
      <el-button type="primary" @click="save">保存</el-button>
    </div>
  </el-dialog>
</template>
<script>

const initInfo = {
  name: '',
  tips: '',
  deptid: '',
  pid: '',
  id: ''
}
export default {
  name: 'RoleEdit',
  data() {
    return {
      title: '添加角色',
      visible: false,
      roleInfo: {},
      deptList: [],
      roleList: [],
      loading: {}
    }
  },
  methods: {
    init(info) {
      this.visible = true
      this.loading = this.$loading({text: '加载中'})
      this.$http.get('dept/list').then(({data}) => {
        if (data.code === 20000) {
          this.deptList = this.formatterTreeData(data.data)
          this.$http.get('/role/list').then(({data}) => {
            if (data.code === 20000) {
              this.loading.close()
              this.roleList = data.data
              if (info) {
                this.title = '修改角色'
                const updateInfo = {
                  id: info.id,
                  name: info.name,
                  deptid: info.deptid,
                  pid: info.pid,
                  tips: info.tips
                }
                this.roleInfo = updateInfo
              } else {
                this.title = '添加修改'
                this.roleInfo = {...initInfo}
              }
            }
          })
        }
      })

      this.$ajax.all([(() => this.$axios.get('dept/list'))(), (() => this.$axios.get("role/list"))()])
        .then(this.$ajax.spread((deptRes, roleRes) => {
          console.log("自调用方案")
          console.log(deptRes);
          console.log(roleRes)
        }))
      this.$ajax.all([this.$axios.get('dept/list'), this.getRoleList("role/list")]).then(this.$ajax.spread((deptRes, roleRes) => {
        console.log("单仁杰方案")
        console.log(deptRes);
        console.log(roleRes)
      }))

      this.$ajax.all([this.getDeptList(), this.getRoleList()]).then(this.$ajax.spread((deptRes, roleRes) => {
        console.log("调用方法防范")
        console.log(deptRes);
        console.log(roleRes)

      }))

    },
    getDeptList() {
      this.$axios.get('dept/list')
    },
    getRoleList() {
      this.$axios.get('role/list')
    },


    formatterTreeData(arr) {
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].children.length === 0) {
          arr[i].children = undefined
        } else {
          this.formatterTreeData(arr[i].children)
        }
      }
      return arr
    },
    save() {
      this.$http.post('role', this.roleInfo).then((res) => {
        if (res.data && res.data.code === 20000) {
          this.$message({
            message: this.roleInfo.id ? '修改成功' : '添加成功',
            type: 'success',
            onClose: () => {
              this.visible = false
              this.$emit('reloadTable')
            }
          })
        } else {
          this.$alert('操作失败', {type: 'error'})
        }
      }).catch((err) => {
        const data = err.response.data
        this.$alert(data.message, {type: 'error'})
      })
    }
  }
}
</script>

<style scoped>

</style>
